import { Layout, Breadcrumb } from 'antd';
import { lazy, Suspense, useEffect, useState } from 'react';
import { BrowserRouter as Router, HashRouter as Hash, Redirect, Route, Switch, withRouter } from "react-router-dom"
import { ajax } from '../../api';
import LazyLoading from '../../components/Loading';
import myinfo from '../../mobx/info';
import Head from './Head';
import Menu1 from './Menu';
import "./index.scss"
import { observer } from '_mobx-react-lite@2.2.2@mobx-react-lite';
import { inject } from 'mobx-react';
const { Content, Footer, Sider } = Layout;
// const {changeFlag,flag}=myinfo

function MainIndex(props:any) {
  const {changeFlag,flag}=props.info
  const getuserinfo = async () => {

    let res = await ajax.getuserinfo()
    // console.log(res);

    myinfo.changeMyInfo(res.result)
  }
  useEffect(() => {
    getuserinfo()
    console.log(props.info);

  }, [])


  return (
    <div className='main'>
      <div  onClick={()=>changeFlag()} style={{ background:"orange", width: "50px", height: "50px", position: "fixed", top: "70%", right: "20px", zIndex: 10000, textAlign: "center", lineHeight: "50px", borderRadius: "50%", cursor: "pointer" }}>换肤</div>
      <Layout>
        <Head></Head>
        {/* <Content style={{ padding: '0 50px' }}> */}
        <Layout>
          <Menu1 ></Menu1>

          <Layout className={flag ? "changeClass" : ""} style={{ padding: '0 24px 24px' }}>
            <Content style={{ borderRadius: '5px', padding: 16, boxShadow: '0 1px 4px rgba(0, 0, 0, 0.3), 0 0 20px rgba(0, 0, 0, 0.1) inset', height: '100%', overflow: "auto" }}>
              <Suspense fallback={LazyLoading()}>
                <Switch>
                  <Route path='/main/' exact component={() => (<Redirect to='/main/home'></Redirect>)}></Route>
                  <Route path='/main/home' exact component={lazy(() => import('../home/home'))}></Route>
                  <Route path='/main/infos' exact component={lazy(() => import('../infos/index'))}></Route>

                  <Route path='/main/user' render={() => (
                    <Switch>
                      <Route path='/main/user/userlist' component={lazy(() => import('../user/userlist'))}></Route>
                      <Route path='/main/user/add' component={lazy(() => import('../user/add'))}></Route>
                      <Route path='/main/user/fenxi' component={lazy(() => import('../user/fenxi'))}></Route>
                    </Switch>

                  )}></Route>

                  <Route path='/main/anno' render={() => (
                    <Switch>
                      <Route path='/main/anno/list' component={lazy(() => import('../anno/annolist'))}></Route>
                      <Route path='/main/anno/add' component={lazy(() => import('../anno/add'))}></Route>
                      <Route path='/main/anno/edit:aid' component={lazy(() => import('../anno/edit'))}></Route>
                      <Route path='/main/anno/detail' component={lazy(() => import('../anno/detail'))}></Route>

                    </Switch>

                  )}></Route>

                  <Route path='/main/advise' render={() => (
                    <Switch>
                      <Route path='/main/advise/list' component={lazy(() => import('../advise/advlist'))}></Route>
                      <Route path='/main/advise/add' component={lazy(() => import('../advise/add'))}></Route>
                    </Switch>

                  )}></Route>

                  {/* 维修报告路由 */}
                  <Route path='/main/reports' render={() => (
                    <Switch>
                      <Route path='/main/reports/Reportlist' component={lazy(() => import('../reports/Reportlist'))}></Route>
                      <Route path='/main/reports/Reportadd' component={lazy(() => import('../reports/Reportadd'))}></Route>
                      <Route path='/main/reports/Reportedit/:aid' component={lazy(() => import('../reports/Reportedit'))}></Route>
                      <Route path='/main/reports/ReportDetail' component={lazy(() => import('../reports/ReportDetail'))}></Route>

                    </Switch>

                  )}></Route>

                  {/* 收费管理路由 */}
                  <Route path='/main/free' render={() => (
                    <Switch>
                      <Route path='/main/free/list' component={lazy(() => import('../free/Freelist'))}></Route>
                      <Route path='/main/free/add' component={lazy(() => import('../free/Freeadd'))}></Route>
                      <Route path='/main/free/edit/:aid' component={lazy(() => import('../free/Freeedit'))}></Route>
                    </Switch>

                  )}></Route>

                  {/* 人事管理路由 */}
                  <Route path='/main/executive' render={() => (
                    <Switch>
                      <Route path='/main/executive/recruiting' component={lazy(() => import('../executive/Recruiting'))}></Route>
                      <Route path='/main/executive/out' component={lazy(() => import('../executive/Out'))}></Route>
                      <Route path='/main/executive/coo' component={lazy(() => import('../executive/Coo'))}></Route>
                    </Switch>

                  )}></Route>
                  {/* 装修管理路由 */}
                  <Route path='/main/finish' render={() => (
                    <Switch>
                      <Route path='/main/finish/add' component={lazy(() => import('../finish/add'))}></Route>
                      <Route path='/main/finish/list' component={lazy(() => import('../finish/list'))}></Route>
                    </Switch>

                  )}></Route>
                  
                  <Route component={() => (<Redirect to="/404" />)} />
                </Switch>
              </Suspense>
            </Content>
          </Layout>
        </Layout>

        {/* </Content> */}
        {/* <Footer style={{ textAlign: 'center' }}>Ant Design ©2021 Created by W df</Footer> */}
      </Layout>
    </div>
  )
}
// export default observer(MainIndex)
export default inject('info')(withRouter(observer(MainIndex)))